<template>
  <div class="banword-container">
    <h1 class="comment-text">敏感词管理</h1>
    <div class="comment-header">
      <el-button type="danger" size="normal" icon="el-icon-delete-solid" @click="handleBatchDelete">
        批量删除
      </el-button>
      <el-input
        placeholder="请输入要搜索的敏感词内容"
        v-model="postTitle" size="20">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" size="normal" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button size="normal" icon="el-icon-refresh" @click="handleClear">
        重置
      </el-button>
      <el-button type="success" size="normal" icon="el-icon-circle-plus" @click="handleAdd">
        新增
      </el-button>
    </div>
    <div v-if="!tableData || tableData.length < 1" class="juzhong">
      <span><i class="el-icon-loading"></i>
      加载中</span>
      <el-divider></el-divider>
    </div>
    <div v-else class="post-table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border>
        <el-table-column
          type="selection"
          width="200"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="id"
          label="敏感词id"
          min-width="100"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="word"
          label="敏感词内容"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center"
                         header-align="center"
                         width="500">
          <template slot-scope="scope">
            <div class="juzhong" style="flex-direction: row">
              <el-button type="danger" @click="confirmDelete(scope.row)">删除</el-button>
              <el-button type="primary" @click="handleEdit(scope.row)">修改</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="juzhong">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 50, 100, 150]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog
      title="新增敏感词"
      :visible.sync="addDialogVisible"
      width="500px">
      <el-form :model="addForm" label-width="120px">
        <el-form-item label="敏感词内容">
          <el-input v-model="addForm.word"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddSubmit">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
      title="修改敏感词"
      :visible.sync="editDialogVisible"
      width="500px">
      <el-form :model="editForm" label-width="150px">
        <el-form-item label="敏感词内容">
          <el-input v-model="editForm.word"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Message, MessageBox} from "element-ui";
import {getBanwords, addorupdateBanword, deleteBanword} from "@/api/comment";

export default {
  name: 'Banword',
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      total: null,
      tableData: [],
      postTitle: '',
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        word: ''
      },
      editForm: {
        id: null,
        word: ''
      }
    }
  },
  methods: {
    async fetchTable() {
      const rep = await getBanwords({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        word: this.postTitle
      });
      this.tableData = rep.items;
      this.total = rep.total;
    },
    ClearPage() {
      this.pageNum = 1;
      this.postTitle = '';
    },
    handleClear() {
      this.ClearPage();
      this.fetchTable();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchTable();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchTable();
    },
    handleSearch() {
      this.fetchTable();
    },
    handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        word: ''
      };
    },
    async handleAddSubmit() {
      try {
        await addorupdateBanword(this.addForm);
        Message.success('新增成功');
        this.addDialogVisible = false;
        await this.fetchTable();
      } catch (e) {
        console.log(e);
        Message.warning('新增失败');
      }
    },
    handleEdit(row) {
      this.editDialogVisible = true;
      this.editForm = {
        id: row.id,
        word: row.word
      };
    },
    async handleEditSubmit() {
      try {
        await addorupdateBanword(this.editForm);
        Message.success('修改成功');
        this.editDialogVisible = false;
        await this.fetchTable();
      } catch (e) {
        console.log(e);
        Message.warning('修改失败');
      }
    },
    async confirmDelete(row) {
      MessageBox.confirm('确定要删除该敏感词吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.handleDelete(row);
      }).then(() => {
        Message.success('删除成功');
        this.fetchTable();
      }).catch(() => {
        Message.info('已取消删除');
      });
    },
    async handleDelete(row) {
      try {
        await deleteBanword(row.id);
      } catch (e) {
        console.log(e);
        Message.warning('删除失败');
      }
    },
    async handleBatchDelete() {
      const selection = this.$refs.multipleTable.selection;
      if (selection.length === 0) {
        Message.warning('请选择要删除的敏感词');
        return;
      }
      MessageBox.confirm('确定要批量删除选中的敏感词吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = selection.map(row => row.id);
        return this.batchDelete(ids);
      }).then(() => {
        Message.success('批量删除成功');
        this.fetchTable();
      }).catch(() => {
        Message.info('已取消批量删除');
      });
    },
    async batchDelete(ids) {
      try {
        await deleteBanword(ids);
      } catch (e) {
        console.log(e);
        Message.warning('批量删除失败');
      }
    }
  },
  mounted() {
    this.fetchTable();
  }
};
</script>

<style scoped lang="scss">
.comment-header {
  display: flex;
  justify-content: start;
  margin: auto;
  width: 100%;
  padding: 10px 0;
}

.banword-container {
  padding: 20px;
}
</style>
